import React from 'react'
import {  TabBar } from 'antd-mobile'
// import style from './css/index.doules.css'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Tabber() {
  // 路由跳转页面
    const navigate=useNavigate()

    // 搭配路由
      const tabs = [
    {
      key: '/index',
      title: '直达',
      icon: <AppOutline />,
    },
    {
      key: '/class',
      title: '机票',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/cart',
      title: '汽车票',
      icon:  <MessageOutline />,
    },
    {
      key: '/my',
      title: '中转',
      icon: <UserOutline />,
    },
  ]

  const change=(key)=>{
    navigate(key)
  }
  return (
    <div className='tab'>
        <TabBar onChange={change}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default Tabber
